<ng-container *ngIf="!outlet.isActivated">
    <div class="px-5 py-2">
        <div class="my-0 m-btn text-right pr-5">
            <button routerLink="/sales/contract" tsBtn color="white">返回列表</button>
        </div>
        <div style="position: relative;">
            <h4 style="font-size: 1.1rem;font-weight:400;" class="mt-5 mb-5 text-center">**公司采购合同-供应商</h4>
            <div style="width:100px;height:100px;background:#ccc; position:absolute;top: 0;right: 0;"></div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">供应商名称</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" placeholder="请输入关键词" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">合同编号</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">合同类型</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择合同类型">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">采购员</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择采购员">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="input-group mb-3 col-sm-9">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">商品类别</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>
            <div class="input-group mb-3 col-sm-3">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">所属部门</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择所属部门">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">起始日期</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择起始日期">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">截止日期</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择截止日期">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">公司抬头</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择公司抬头">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">信用额度</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">录入人</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择录入人">
                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">到货天数</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">签订日期</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">建档日期</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
        </div>
    </div>
    <div class="p-2 bg-white my-5">
        <div class="card-body">
            <h4 style="font-size: 1.1rem;font-weight:400;" class="mt-5 mb-5 text-center">合同商品</h4>
            <div class="table-responsive">
                <table class="table table-striped">
                    <tbody>
                        <tr class="font-weight-bold bg-light">
                            <td *ngFor="let th of thFir">{{th}}</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2
                                <!-- <img tsImg [src]="td.goodsThumb" dataSrc="assets/images/404.jpg" class="rounded-circle" width="40" height="40" alt="Logo"> -->
                            </td>
                            <td><input [(ngModel)]="search.params.name" type="text" class="form-control" placeholder="请输入关键词">
                            </td>
                            <td><input [(ngModel)]="search.params.name" type="text" class="form-control" placeholder="请输入关键词">
                            </td>
                            <td>5</td>
                            <!-- {{td.createdAt.substring(0,10)|date:'yyyy/MM/dd'}} -->
                            <td>
                                <div class="input-group col">
                                    <!-- <div class="input-group-prepend">
      <span class="input-group-text bg border-0">申请人</span></div> -->
                                    <div class="border-0 radius-0 form-control p-0">
                                        <select [(ngModel)]="goods.goodsParentType" class="bg-white custom-select border-0"
                                            title="请选择">
                                            <option *ngFor="let type of parentTypes" [ngValue]="type.value">111</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group col">
                                    <!-- <div class="input-group-prepend">
      <span class="input-group-text bg border-0">申请人</span></div> -->
                                    <div class="border-0 radius-0 form-control p-0">
                                        <select [(ngModel)]="goods.goodsParentType" class="bg-white custom-select border-0"
                                            title="请选择">
                                            <option *ngFor="let type of parentTypes" [ngValue]="type.value">111</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>5</td>
                            <td>4</td>
                            <td>5</td>
                            <td>
                                <div class="border-0 radius-0 form-control p-0">
                                    <select [(ngModel)]="goods.goodsParentType" class="bg-white custom-select border-0"
                                        title="请选择">
                                        <option [ngValue]="1">是</option>
                                        <option [ngValue]="2">否</option>
                                    </select>
                                </div>
                            </td>
                            <td>5</td>
                            <!-- <span *ngIf="td.isActive===1" class="badge badge-success badge-pill">启用</span>
                                    <span *ngIf="td.isActive!==1" class="badge badge-secondary badge-pill">停用</span> -->
                            <td>
                                <!-- <span (click)="confirmDelete(td)" tsTip="删除" class="btn-icon btn-icon-danger">
                    <i tsIcon="delete"></i>
                  </span>
                                    <span tsTip="详情/编辑" class="btn-icon btn-icon-info" routerLink="detail/{{td.id}}">
                    <i tsIcon="edit"></i>
                  </span> -->
                                <span (click)="confirmDelete()" tsTip="添加商品" class="btn-icon btn-icon-success">
                                    <!-- <i tsIcon="delete"></i> -->添加
                                </span>
                                <span (click)="confirmDelete()" tsTip="删除" class="btn-icon btn-icon-danger">
                                    <i tsIcon="delete"></i>
                                </span>
                                <span tsTip="详情/编辑" class="btn-icon btn-icon-info">
                                    <i tsIcon="edit"></i>
                                </span>
                                <!-- <span tsTip="查看" class="btn-icon btn-icon-info" routerLink="user">
<i tsIcon="edit"></i>查看
</span> -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="text-right">
                <ts-pagination (pageChange)="loadDatas()" [pagination]="pagination" [items]="[{text:'显示 5 条',value:5},{text:'显示 10 条',value:10},{text:'显示 20 条',value:20}]"
                    [color]="global.params.color" goTitle="跳转" prevTitle="上一页" nextTitle="下一页" startTitle="首页" endTitle="末尾"
                    outline></ts-pagination>
            </div>
        </div>
        <div class="card-body">
            <!-- <ts-table-load [display]="loading"></ts-table-load> -->
            <h4 style="font-size: 1.1rem;font-weight:400;" class="mt-5 mb-5 text-center">合同条款</h4>
            <div class="form-group">
                <label class="col-form-label label-required text-right">付款条款</label>
                <div class="pt-2">
                    <ts-checkbox class="mr-5" *ngFor="let sel of payTerms;index as i" color="secondary" [value]="i+1"
                        [(ngModel)]="sel.name">
                        {{sel.beforeInputLabel}}
                        <input *ngIf="sel.hasInput" [(ngModel)]="sel.inputValue" class="border-l-0 border-r-0 radius-0 border-t-0 form-control"
                            style="width:50px !important;" type="text"> {{sel.afterInputLable}}
                    </ts-checkbox>
                </div>
            </div>
            <div class="form-group">
                <label class="col-form-label label-required text-right">运费条款</label>
                <div class="pt-2">
                    <ts-checkbox class="mr-5" *ngFor="let sel of freightTerm;index as i" color="secondary" [value]="i+1"
                        [(ngModel)]="sel.name">
                        {{sel.beforeInputLabel}}
                        <input *ngIf="sel.hasInput" [(ngModel)]="sel.inputValue" class="border-l-0 border-r-0 radius-0 border-t-0 form-control"
                            style="width:50px !important;" type="text"> {{sel.afterInputLable}}
                    </ts-checkbox>
                </div>
            </div>
            <div class="form-group">
                <label class="col-form-label label-required text-right">退货条款</label>
                <div class="pt-2">
                    <ts-checkbox class="mr-5" *ngFor="let sel of returnTerm;index as i" color="secondary" [value]="i+1"
                        [(ngModel)]="sel.name">
                        {{sel.beforeInputLabel}}
                        <input *ngIf="sel.hasInput" [(ngModel)]="sel.inputValueinputValue" class="border-l-0 border-r-0 radius-0 border-t-0 form-control"
                            style="width:50px !important;" type="text"> {{sel.afterInputLable}}
                    </ts-checkbox>
                </div>
            </div>
            <div class="form-group">
                <label class="col-form-label label-required text-right">返利条款</label>
                <div class="pt-2">
                    <ts-checkbox class="mr-5" *ngFor="let sel of rebateTerm;index as i" color="secondary" [value]="i+1"
                        [(ngModel)]="sel.name">
                        {{sel.beforeInputLabel}}
                        <input *ngIf="sel.hasInput" [(ngModel)]="sel.inputValue" class="border-l-0 border-r-0 radius-0 border-t-0 form-control"
                            style="width:50px !important;" type="text"> {{sel.afterInputLable}}
                    </ts-checkbox>
                </div>
            </div>
            <div class="text-right">
                <div class="my-4">
                    <ts-checkbox class="mr-5" color="text-secondary" [value]="1" [(ngModel)]="name">
                        采购提醒
                    </ts-checkbox>
                    <ts-checkbox class="mr-5" color="text-success" [value]="1" [(ngModel)]="name">
                        销售提醒
                    </ts-checkbox>
                </div>
            </div>

            <div class="text-right">
                <ts-pagination (pageChange)="loadDatas()" [pagination]="pagination" [items]="[{text:'显示 5 条',value:5},{text:'显示 10 条',value:10},{text:'显示 20 条',value:20}]"
                    [color]="global.params.color" goTitle="跳转" prevTitle="上一页" nextTitle="下一页" startTitle="首页" endTitle="末尾"
                    outline></ts-pagination>
            </div>
        </div>



        <div  class="bg-light pr-5  pl-5">
        <div style="position: relative;">
            <h4 style="font-size: 1.1rem;font-weight:400;" class="mt-5 mb-5 text-center">财务条款</h4>
        </div>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">开票资料</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">公司名称</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">公司账号</span></div>
                    <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">公司地址</span></div>
                    <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">公司电话</span></div>
                    <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col"></div>
            <div class="input-group mb-3 col"></div>
            <div class="input-group mb-3 col"></div>
        </div>
        <div class="row" style="margin-top:50px">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">对账日期</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">交票日期</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">付款日期</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <ts-checkbox class="mr-0" color="secondary" style="margin-left:225px">提醒</ts-checkbox>
            </div>
        </div>
    </div>

        <div class="card-body">
            <h4 style="font-size: 1.1rem;font-weight:400;" class="mt-5 mb-5 text-center">合同附件</h4>
            <div class="input-group mb-3">
                <div class="input-group-prepend mr-3">
                    <span class="bg-white input-group-text border-0" style="height:37px;">上传合同附件</span>
                </div>
                <ts-image-cards [(src)]="imagesUrl" [config]="config"></ts-image-cards>
            </div>
        </div>
    </div>

    <div class="my-5 m-btn text-right pr-5">
        <button routerLink="/purchase/contract" tsBtn color="white">返回列表</button>
        <button *ngIf="goods.id===0" tsBtn loading color="success" (submit)="confirmInsert($event)">确定</button>
        <button routerLink="/purchase/contract" tsBtn color="danger">取消</button>
    </div>
</ng-container>

<router-outlet #outlet="outlet"></router-outlet>